<template>
  <div>

    <!--模态窗 单行-->
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >

      <div class="modal-ctrl-body" v-show="false">
        <div class="modal-ctrl-main odd-row-ctrl">
          <div class="modal-title">
            <p>模态窗标题</p>
          </div>
          <div class="modal-ctrl-content">
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
            <div class="modal-row">
              <div class="modal-form-key f-l">
                警员姓名：
              </div>
              <input type="text" class="modal-text f-l">
            </div>
          </div>
          <div class="btns text-r">
            <button type="button" class="btn btn-default">取消</button>
            <button type="button" class="btn btn-info">确定</button>
          </div>
        </div>
      </div>
    </transition>

    <!--模态窗 多行-->
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >

      <div class="modal-ctrl-body" v-if="initModalHtml.typeCtrl" v-show="isShowModal">
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>{{initModalHtml.typeCtrl.title}}</p>
          </div>
          <div class="modal-ctrl-content">

            <div class="even-row">

              查询数据接口：{{initModalHtml.initData}}
                <br>

              <!--通用 -->
              <div class="modal-row" v-for="(item,index) in initModalHtml.typeCtrl.content" v-show=" item.display==='0' " :key="index">

                <!-- 通用标题 -->
                <div class="modal-form-key f-l">
                  {{item.label}}：
                </div>

                <!-- 下拉选择 -->
                <select :disabled="item.readonly === '1'" v-if="item.inputType==='select'" :ref="item.fieldName">
                  <option v-for="(option,index) in item.options" :key="index" :value="option.value">{{ option.displayname }}</option>
                </select>

                <!-- 通用输入框 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='hidden'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder" >

                <!-- 通用输入框 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='text'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder" @blur="formVerify(item,initModalHtml.btns,item.fieldName)">

                <!-- 通用下拉树 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='selectTree'" @click="selectTreeModal(item)" :type="item.inputType" class="modal-text f-l" :placeholder="item.placeholder" @focus="treeIsShow(item.treeBodyId)">

                <!-- 通用下拉树搜索树 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='selectSearch'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

                 <!-- 通用日期选择 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='birthday'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

                  <!-- 通用选择模态窗 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='modal'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

                <!-- 通用文件选择模态窗 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='file'" :type="item.inputType"  class="modal-text f-l" :placeholder="item.placeholder">

                 <!-- 通用生日 -->
                <input :disabled="item.readonly === '1'" v-else-if="item.inputType==='date'" :type="item.inputType" :ref="item.fieldName" class="modal-text f-l" :placeholder="item.placeholder">

                <!-- 下拉树选择 -->
                <div class="ModalTreeBody" v-if="item.treeBodyId">
                  <input type="hidden"
                  :dataFieldName="item.treeBodyId"
                  :ref="item.fieldName" v-if="item.inputHidden">
                  <div :id="item.treeBodyId" class="ztree" :dataFieldName="item.treeBodyId"></div>
                </div>
              </div>

            </div>

          </div>
          <div class="btns text-r">
            <button type="button" class="btn" :class="btn.className" v-for="(btn,index)  in initModalHtml.btns" :key="index" @click="formData(btn)" :id="btn.id">
              {{ btn.name }}
            </button>
            <!-- <button type="button" class="btn btn-default" >取消</button>
            <button type="button" class="btn btn-info" @click="formData(initModalHtml)">确定</button> -->
          </div>
        </div>
      </div>

    </transition>

    <!--模态窗 查看更多信息-->
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInDown"
      leave-active-class="animated fadeOutUp"
    >
      <div class="modal-ctrl-body" v-show="false">
        <div class="modal-ctrl-main even-row-ctrl">
          <div class="modal-title">
            <p>模态窗标题</p>
          </div>
          <div class="modal-ctrl-content">
            <div class="modal-table-details">
              <!--表格头-->
              <div class="table-header">
                <table class="table-default">
                  <thead>
                  <tr>
                    <th>一</th>
                    <th>二</th>
                    <th>三</th>
                    <th>四</th>
                    <th>五</th>
                    <th>六</th>
                    <th>七</th>
                  </tr>
                  </thead>
                </table>
              </div>
              <!--表格中部-->
              <div class="table-overflowX">
                <table class="table-default">
                  <tbody>
                  <!--<tr v-for="(trs,index) in tableData" :class="{'active': active === index }">-->
                    <!--<td v-for="tds in trs.row">-->
                      <!--{{ tds }}-->
                    <!--</td>-->
                  <!--</tr>-->
                  </tbody>
                </table>
              </div>
            </div>
          </div>
          <div class="btns text-r">
            <button type="button" class="btn btn-default">取消</button>
            <button type="button" class="btn btn-info">确定</button>
          </div>
        </div>
      </div>
    </transition>

  </div>
</template>

<script>
    export default {
        name: "ModalWindow",
        props:["isShowModal","initModalHtml"],
        data(){
          return{

          }
        },

        methods:{
          dwnTree(itemObj){
            //console.log(itemObj)
          },
          treeIsShow(treeBoxId){ //选择树显示
            $("#"+ treeBoxId +"").parents(".ModalTreeBody").show();

          },
          treeIsHide(treeBoxId){
            $("#"+ treeBoxId +"").parents(".ModalTreeBody").hide();
          },
          formVerify(formItemObj,btns,itemValue){ //模态窗口验证
           // //console.log(formItemObj.fieldName);
            //console.log(formItemObj);
            ////console.log();

            //let inputValue = this.$refs[itemValue][0].value;
            let regSub = RegExp(/[submit]/);
            let regEdi = RegExp(/[edit]/);
            let btn = [];

            for( let i=0;i<btns.length;i++ ){//查找提交按钮
              if( btns[i]["id"] ){
                if( regSub.test(btns[i]["id"]) || regEdi.test(btns[i]["id"]) ){ //提交按钮
                  btn.push(btns[i]);
                }
              }
            }

            const verifyItem = formItemObj.onblur; //当前对象验证
            const verifyVal = this.$refs[formItemObj.fieldName][0].value; //当前验证对象属性值
            //console.log(verifyVal);
            if(verifyItem){ //存在验证
              for( let i=0;i<verifyItem.length;i++ ){

              //console.log(verifyItem[i].function);
                if( verifyItem[i].function === "isNull" ){ //验证是否为空

                  if( layoutFn.isNull(verifyVal) ){
                    this.isDisabled(btn,false);
                  }else{//验证不通过
                    this.s_alert(verifyItem[i].message);
                    this.isDisabled(btn,true);
                    return false;
                  }
                }

                 if( verifyItem[i].function === "isExist" ){ //唯一性验证
                      //console.log(verifyItem[i].function);
                    ////console.log("isExist");
                    for( let i=0;i<formItemObj.onblur.length;i++ ){
                      if( formItemObj.onblur[i].function === "isExist" ){
                        let params = {};
                        //console.log(verifyVal);
                        for( let k=0;k<formItemObj.onblur[i].params.length;k++ ){
                          //console.log(formItemObj.onblur[i].params);
                          for( let key in formItemObj.onblur[i].params[k] ){

                            if( formItemObj.fieldName === formItemObj.onblur[i].params[k].name ){
                              //console.log(formItemObj.fieldName);
                              //params = formItemObj.fieldName+"="+verifyVal
                              params[formItemObj.fieldName] = verifyVal
                            }
                          }
                        }

                        this.$axios[formItemObj.onblur[i].httpType](this.HOST + formItemObj.onblur[i].url,{
                          params:params
                        })
                        .then((data)=>{
                          if( data.data.data.length > 0 ){ //唯一性验证不通过
                            this.s_alert(formItemObj.onblur[i].message);
                            this.isDisabled(btn,true);
                            return false;
                          }else{
                            this.isDisabled(btn,false);
                          }
                          //console.log(data);
                        })
                        .catch((err)=>{
                          //console.log(data);
                        })
                      }
                    }
                  }

              }
            }
          },
          isDisabled(btnsArr,Boole){
            for( let k=0;k<btnsArr.length;k++ ){
              $("#"+ btnsArr[k].id +"").attr("disabled",Boole);
            }
          },

          formData(btnObj){
            //console.log(btnObj);


            ////console.log(params);

            if(btnObj.click){
              if( layoutFn.btnSubStringType(btnObj.id) === "submit" || layoutFn.btnSubStringType(btnObj.id) === "edit" ){
                let params = {};
                //console.log(this.$refs);
                for( let resKey in this.$refs ){
                  ////console.log(resKey);
                 // //console.log(this.$refs[resKey][0].value)
                 if(this.$refs[resKey][0]){
                    params[resKey] = this.$refs[resKey][0].value;
                 }

                }
                this.modalAjaxFormSub(btnObj.click[0].httpType,btnObj.click[0].url,params);
              }
            }

            this.modalClose();
          },
          modalAjaxFormSub(type,url,params){
            this.$axios[type](this.HOST + url,params)
            .then((data)=>{
              //this.s_alert("新增成功");
              //console.log(data);
            })
            .catch((err)=>{
              //console.log(err);
            })
          },
          modalClose(){
           // this.$refs;
            this.initModalHtml.typeCtrl.content = [];
            this.$emit("modal-close");
          },
          selectTreeModal(obj){
            //console.log(obj);
            //console.log(this.$refs);
            $(function(){
              //console.log( $("#"+ obj.treeBodyId +""));
              //console.log("obj.options");
              //console.log($("#"+ obj.treeBodyId +"").prev().val());
              // let treeSelcetId = $("#"+ obj.treeBodyId +"").prev().val();


              let setting = {
                data: {
                  simpleData: {
                    enable: true
                  },
                },
                check:{
                  chkStyle:"checkbox",
                  chkboxType:{ "Y": "ps", "N": "ps" },
                  enable:true
                },
                callback : {
                  onClick:function(event,treeId,treeNode){
                    let stationId = treeNode.id;
                    let stationName = treeNode.name;
                    //console.log(treeNode);
                    let treeNodeBox = $(event.currentTarget) //树节点集合父级
                    treeNodeBox.prev().val(stationId);   //隐藏域 部门id
                    treeNodeBox.parents(".ModalTreeBody").prev().val(stationName);
                    treeNodeBox.parents(".ModalTreeBody").hide();
                  }
                }
              }

              $.fn.zTree.init( $("#"+ obj.treeBodyId +""), setting,obj.options);
            });
          }
        },

        watch:{
          initModalHtml(newVal,lodVal){

            //console.log(newVal);

            let stroageData = JSON.parse(sessionStorage.getItem("cacheMappingTable"));
            //console.log(stroageData);
            let params = {};

           if(newVal.initData[0]){ //存在初始化数据的时候
              for( let i=0;i<newVal.initData[0].params.length;i++ ){
                for( let key in stroageData ){
                  if( newVal.initData[0].params[i].name === key ){
                    params[key] = stroageData[key];
                  }
                }
              }

              this.$axios[newVal.initData[0].httpType](this.HOST+newVal.initData[0].url,{
                params:params
              })
              .then((data)=>{
                //console.log(data)
                //console.log(this.$refs);

                //通用结构树修改有参数渲染
                for( let i=0;i<newVal.typeCtrl.content.length;i++ ){
                  if( newVal.typeCtrl.content[i].treeBodyId ){

                    $(function(){
                      let selectId = $("#"+ newVal.typeCtrl.content[i].treeBodyId +"").prev().val();
                      for( let k=0;k<newVal.typeCtrl.content[i].options.length;k++ ){
                        let sclectOptionsObj = newVal.typeCtrl.content[i].options[k];
                        if( selectId === sclectOptionsObj.id ){
                          ////console.log(sclectOptionsObj.name);
                          $("#"+ newVal.typeCtrl.content[i].treeBodyId +"").parents(".ModalTreeBody").prev().val(sclectOptionsObj.name);
                        }
                      }
                      ////console.log($("#"+ newVal.typeCtrl.content[i].treeBodyId +"").prev().val());
                    });
                  }
                }

                //this.$refs.name[0].value = "12334567890"
                ////console.log(data.data.data);
                for( let responseKey in data.data.data){

                  for( let refsKey in this.$refs ){
                      ////console.log(refsKey);
                      if( refsKey.indexOf("|") != -1 ){ //判断是否查询的key是否有取子集字段
                        ////console.log(this.$refs[refsKey]);
                        let keyArr = refsKey.split("|");
                        if( responseKey === keyArr[0] ){ //需要获取当前key的下集value

                          this.$refs[refsKey][0].value = data.data.data[keyArr[0]][keyArr[1]];
                        //  //console.log(this.$refs[refsKey][0].value);
                        }
                      }else{
                        if( responseKey === refsKey ){ //获得当前key下的value
                          if(this.$refs[refsKey][0]){
                            this.$refs[refsKey][0].value = data.data.data[refsKey];
                          }

                        }
                      }

                  }
                }
              })
              .catch((err)=>{
                //console.log(err);
              })

           }

          }

        },
        mounted(){

          ////console.log(this.initModalHtml.initData)

          $(function(){
          //  this.s_alert(1);
           // //console.log( $("[dataFieldName]") )
          });
        }
    }
</script>

<style scoped>
  .fadeInDown,.fadeOutUp{
    animation-duration: .500s;
  }
</style>
